$(function () {
    initArtCatelist()
    // 获取文章列表并渲染到页面
    function initArtCatelist(data) {
        axios({
            method: 'get',
            url: '/my/article/cates',
        }).then(res => {
            let list = res.data.data
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            let arr = []
            list.forEach(ele => {
                arr.push(`<tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                <button type="button" data-msg="${ele.Id}"  class="layui-btn-xs layui-btn layui-btn editbtn">编辑</button>
                <button type="button" data-msg="${ele.Id}"  class="layui-btn-xs layui-btn layui-btn layui-btn-danger removebtn">删除</button>
                </td>
                </tr>`)
            })
            let a = arr.join('')
            $('.tb').empty().html(a)
        })
    }
    let addindex
    // 点击添加分类按钮弹出 弹出层
    $('.btn').on('click', function () {
        addindex = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '添加类别',
            content: `
                <form id="addform" class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                            autocomplete="off" class="layui-input">
                       </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button type="submit" class="layui-btn">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                    </div>
                </form>
            `
        })
    })

    // 添加分类功能
    $('body').on('submit', '#addform', function (e) {
        e.preventDefault()
        console.log($(this).serialize());
        axios({
            method: 'post',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
            initArtCatelist()
            layer.close(addindex)
        })
    })
    let indexEdit
    // 点击编辑按钮获取此项的文章类别内容
    $('tbody').on('click', '.editbtn', function () {
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '260px'],
            title: '修改文章分类',
            content: `
                <form id="xiugaiform" class="layui-form" lay-filter="xiugaiform">
                   <input type="hidden" name="Id">
                   <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                            autocomplete="off" class="layui-input">
                       </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button type="submit" class="layui-btn xiugai">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                    </div>
                </form>
            `
        })
        let i = $(this).attr('data-msg')
        // 第三种传递参数的方式:/my/article/cates/:id'    
        // /: id 指的是路由参数  传参的时候 / 不能省略  : 一定要省略 后面跟参数
        axios({
            method: 'get',
            url: '/my/article/cates/' + i,
        }).then(res => {
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.form.val('xiugaiform', res.data.data)
        })

    })


    // 修改类别功能
    $('body').on('submit', '#xiugaiform', function (e) {
        e.preventDefault()
        axios({
            method: 'post',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            console.log(res);

            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg('修改成功')
            initArtCatelist()
            layer.close(indexEdit)
        })
    })


    // 删除功能
    $('body').on('click', '.removebtn', function () {
        let ii = $(this).attr('data-msg')
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            axios({
                method: 'get',
                url: '/my/article/deletecate/' + ii,
            }).then(res => {
                console.log(res);
                if (res.data.status != 0) {
                    return layui.layer.msg(res.data.message)
                }
                layui.layer.msg('删除成功')
                initArtCatelist()
            })
            layer.close(index);
        });


    })
})